<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="divLocationView">
    <div class="divLocationViewCondition">
      <div class="divAreaTop">
        <div class="divTitle">库区选择</div>
        <el-select
          style="height: 98px; padding-left: 15px; padding-right: 15px"
          clearable
          v-model="Warehouse"
          size="medium"
          placeholder="请选择"
          @change="changeFn"
        >
          <el-option
            v-for="(item, index) in WarehouseList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="divAreaContent">
        <div class="divAreaCondition">
          <el-input
            style="
              width: 170px;
              height: 50px;
              padding-top: 35px;

              padding-left: 20px;
            "
            clearable
            v-model="form.personName"
            placeholder="请输入库区名称
            "
          ></el-input>
        </div>
        <div class="divAreaDetails">
          <div class="a656">
            <div
              :class="{ active: item.id === currentIndex }"
              @click="checkTemplate(item.id)"
              class="divAreaItem itemActive"
              v-for="item in WarehouseListy"
              :key="item.id"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="divDivision"></div>
    <div class="divLocationViewDisplay">
      <div class="divTop">
        <div class="divTitle">库区总览</div>
        <div class="divOverView">
          <div class="divItem">
            <span>库存总计:</span>
            <span>{{ overviewList.total }}</span>
          </div>
          <div class="divItem">
            <div
              class="divSquare"
              style="
                background-color: rgb(195, 195, 195);
                width: 12px;
                height: 12px;
                border-radius: 3px;
              "
            ></div>
            <span>停用库位::</span>
            <span>{{ overviewList.stop }}</span>
          </div>
          <div class="divItem">
            <div
              class="divSquare"
              style="
                background-color: rgb(0, 190, 118);
                width: 12px;
                height: 12px;
                border-radius: 3px;
              "
            ></div>
            <span>占用库位::</span>
            <span>{{ overviewList.use }}</span>
          </div>
          <div class="divItem">
            <div
              class="divSquare"
              style="
                background-color: rgb(178, 220, 204);
                width: 12px;
                height: 12px;
                border-radius: 3px;
              "
            ></div>
            <span>空闲库位:</span>
            <span>{{ overviewList.free }}</span>
          </div>
        </div>
      </div>
      <div class="divContent">
        <div
          class="divSquare"
          style="
            background-color: rgb(195, 195, 195);
            width: 36px;
            height: 36px;
            border-radius: 7px;

            background-color: #00be76 !important;
          "
          v-for="(item, index) in useList"
          :key="index + 100000"
        ></div>
        <div
          class="divSquare"
          style="
            background-color: #b2dccc !important;

            width: 36px;
            height: 36px;
            border-radius: 7px;
          "
          v-for="(item, index) in freeList"
          :key="index + 1212"
        ></div>
        <div
          class="divSquare"
          style="
            background-color: rgb(195, 195, 195);
            width: 36px;
            height: 36px;
            border-radius: 7px;
          "
          v-for="(item, index) in stopList"
          :key="index + 2"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { warehouse, areaList, overview } from '@/api/location'

export default {
  data () {
    return {
      Warehouse: '',
      WarehouseList: [],
      WarehouseListy: [],
      form: '',
      currentIndex: 0,
      overviewList: [],
      useList: [],
      stopList: [],
      freeList: []
    }
  },
  async created () {
    this.warehouseList()
    this.changeFn()
  },
  methods: {
    async checkTemplate (index) {
      this.currentIndex = index
      const {
        data: { data }
      } = await overview(index)
      this.overviewList = data
      this.useList = new Array(this.overviewList.use)
      this.stopList = new Array(this.overviewList.stop)
      this.freeList = new Array(this.overviewList.free)
    },
    async changeFn () {
      setTimeout(async () => {
        console.log(this.Warehouse)
        const res = {}
        res.status = 1
        res.warehouseId = this.Warehouse
        const {
          data: { data }
        } = await areaList(res)
        this.WarehouseListy = data
        console.log(this.WarehouseListy)
        if (data[0]) {
          this.currentIndex = data[0].id
        }
        const a = await overview(this.currentIndex)
        this.overviewList = a.data.data
        this.useList = new Array(this.overviewList.use)
        this.stopList = new Array(this.overviewList.stop)
        this.freeList = new Array(this.overviewList.free)
      }, 300)
    },

    async warehouseList () {
      const {
        data: { data }
      } = await warehouse()
      for (let i = 0; i < data.length; i++) {
        const a = {}
        a.value = data[i].id
        a.label = data[i].name
        this.WarehouseList.push(a)
      }
      this.Warehouse = data[0].id
      console.log(this.Warehouse)
    }
  }
}
</script>

<style lang="scss" scoped>
.divContent {
  display: flex;
  .divSquare {
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 10px;
  }
}
.a656 {
  margin-bottom: 25px;
}
.itemActive {
  background: #ffb200;
  color: #332929;
}
::v-deep .el-input__inner {
  height: 40px;
  line-height: 40px;
  border: 1px solid #f8f5f5;
  background: #f8f5f5;
  border-radius: 6px;
}
.divLocationView {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  margin: 20px 29px 30px 29px;
  height: calc(100vh - 114px);
}
.divLocationView .divLocationViewCondition {
  width: 220px;
  padding: 27px 19px 27px 20px;
  float: left;
}
.divLocationView .divLocationViewCondition .divAreaTop {
  height: 90px;
  margin-bottom: 21px;
}
.divLocationView .divLocationViewCondition .divAreaTop .divTitle {
  width: 64px;
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #332929;
  line-height: 22px;
  margin-bottom: 22px;
  margin-left: 10px;
}
.divAreaItem {
  width: 140px;
  height: 40px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 6px 0 rgb(255 178 0 / 40%);
  margin: 0 auto;
  margin-top: 20px;
  font-size: 13px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  color: #ffb200;
  line-height: 40px;
  cursor: pointer;
}
.divLocationView .divLocationViewCondition .divAreaContent {
  width: 210px;
  background: #fdfcf9;
  border: 1px solid #f7f2f1;
  border-radius: 6px;
  margin: 0px 29px 0 0px;
}
.divLocationView .divDivision {
  float: left;
  width: 10px;
  height: 100%;
  background: linear-gradient(
    270deg,
    hsla(0, 0%, 100%, 0),
    rgba(99, 97, 96, 0.1)
  );
}
.divLocationViewDisplay {
  padding: 27px 19px 27px 20px;
  float: left;
  height: 100%;
}
.divTop {
  margin-bottom: 21px;
  height: 22px;
}
.divTitle {
  width: 64px;
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #332929;
  line-height: 22px;
  float: left;
  margin-right: 103px;
}
.divOverView {
  float: left;
}
.divItem {
  float: left;
  margin-right: 43px;
}
.span {
  float: left;
  margin-right: 4px;
  width: 70px;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #424250;
}
.divSquare {
  float: left;
  margin-top: 5px;
  margin-right: 7px;
}
::v-deep .active {
  background: #ffb200;
  color: #332929;
}
</style>
